Angular Material এর MatTable কম্পোনেন্ট ব্যবহার করে আপনি টেবিল তৈরি করতে পারেন এবং এর সারির (row) কাস্টম ডাটা টেমপ্লেট কাস্টমাইজ করতে পারেন। এটি বিশেষভাবে উপকারী যখন আপনি টেবিলের বিভিন্ন কলামে কাস্টম কন্টেন্ট (যেমন, আইকন, ডেটা ফরম্যাটিং, স্টাইল ইত্যাদি) প্রদর্শন করতে চান।

Angular Material-এর MatTable এর সাথে ng-template এবং ngFor ডিরেকটিভ ব্যবহার করে আপনি টেবিলের ডাটা কাস্টমাইজ করতে পারেন।

কাস্টম ডাটা টেমপ্লেট তৈরি করার জন্য পদক্ষেপ

১. Angular Material ইন্সটল করা

প্রথমে Angular Material ইন্সটল করুন (যদি আগে ইন্সটল না করা থাকে):

ng add @angular/material

২. প্রয়োজনীয় মডিউল ইমপোর্ট করা

আপনার app.module.ts ফাইলে MatTableModule এবং অন্যান্য প্রয়োজনীয় মডিউল ইমপোর্ট করুন।

import { MatTableModule } from '@angular/material/table';
import { MatIconModule } from '@angular/material/icon';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';

@NgModule({
  imports: [
    MatTableModule,
    MatIconModule,
    MatSortModule,
    MatPaginatorModule
  ]
})
export class AppModule {}

৩. টেবিল HTML কোড

এখন, MatTable কম্পোনেন্ট ব্যবহার করে টেবিল তৈরি করতে পারেন। টেবিলের মধ্যে কাস্টম ডাটা টেমপ্লেট (যেমন, আইকন, কাস্টম ফরম্যাটিং ইত্যাদি) প্রদর্শন করতে ng-template ব্যবহার করা হয়।

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  
  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Age Column -->
  <ng-container matColumnDef="age">
    <th mat-header-cell *matHeaderCellDef> Age </th>
    <td mat-cell *matCellDef="let element"> {{element.age}} </td>
  </ng-container>

  <!-- Icon Column -->
  <ng-container matColumnDef="icon">
    <th mat-header-cell *matHeaderCellDef> Icon </th>
    <td mat-cell *matCellDef="let element">
      <mat-icon>{{element.icon}}</mat-icon>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে, ng-container ব্যবহার করা হয়েছে যাতে টেবিলের কলাম এবং সারির কাস্টম টেমপ্লেট ডিফাইন করা যায়।

৪. টাইপস্ক্রিপ্ট কোড

AppComponent ক্লাসে ডাটা সোর্স এবং কলামগুলো ডিফাইন করুন।

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  displayedColumns: string[] = ['name', 'age', 'icon'];
  dataSource = [
    {name: 'John', age: 25, icon: 'person'},
    {name: 'Jane', age: 30, icon: 'person_outline'},
    {name: 'Max', age: 35, icon: 'people'},
  ];
}

এখানে, dataSource অ্যারে ব্যবহার করা হয়েছে, যাতে প্রতিটি রো (row) এর জন্য নাম, বয়স এবং আইকন আছে।

৫. কাস্টম স্টাইল এবং কন্টেন্ট

এখন আপনি যদি টেবিলের কোনো কলামে কাস্টম স্টাইলিং বা কন্টেন্ট দিতে চান, তবে সেটা সহজেই করা সম্ভব। উদাহরণস্বরূপ, আমরা বয়সের জন্য কাস্টম ফরম্যাটিং ব্যবহার করতে পারি।

<ng-container matColumnDef="age">
  <th mat-header-cell *matHeaderCellDef> Age </th>
  <td mat-cell *matCellDef="let element">
    {{element.age > 30 ? 'Senior' : 'Junior'}}
  </td>
</ng-container>

এখানে, বয়সের মানের উপর ভিত্তি করে "Senior" বা "Junior" প্রদর্শিত হবে।

৬. পেজিনেশন এবং সার্টিং (Optional)

এছাড়া, Angular Material এর MatPaginator এবং MatSort ব্যবহার করে টেবিলের পেজিনেশন এবং সার্টিংও করা সম্ভব।

<mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

এখানে, আমরা টেবিলের পেজ সাইজ কনফিগার করেছি এবং showFirstLastButtons অপশন ব্যবহার করে প্রথম এবং শেষ পেজের বাটনগুলো দেখানো হয়েছে।

<table mat-table [dataSource]="dataSource" matSort>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>
  
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

এখানে, mat-sort-header ব্যবহার করা হয়েছে যা প্রতিটি কলামকে সার্টেবল (sortable) বানাবে।

Angular Material এর MatTable কম্পোনেন্ট এবং ng-template ব্যবহার করে আপনি সহজেই টেবিলের কাস্টম ডাটা টেমপ্লেট তৈরি করতে পারেন। এতে আপনি বিভিন্ন কলামে কাস্টম কন্টেন্ট, স্টাইল, এবং ডেটা ফরম্যাটিং যোগ করতে পারেন। এছাড়াও, MatPaginator এবং MatSort ব্যবহার করে টেবিলের পেজিনেশন এবং সার্টিং সুবিধা প্রদান করা যায়, যা ব্যবহারকারীদের জন্য আরও ইন্টারঅ্যাকটিভ এবং সহজবোধ্য অ্যাপ্লিকেশন তৈরি করতে সহায়ক।